.dx-popover-arrow-size(@width) {
    @SQRT_2: 1.4142;
    @POPOVER_ARROW_WIDTH: @width;
    @POPOVER_ARROW_HEIHT: @POPOVER_ARROW_WIDTH / 2;

    .dx-popover-wrapper {
        .dx-popover-arrow:after {
            width: @POPOVER_ARROW_WIDTH / @SQRT_2;
            height: @POPOVER_ARROW_WIDTH / @SQRT_2;
        }

        &.dx-position-top,
        &.dx-position-bottom {
            .dx-popover-arrow {
                width: @POPOVER_ARROW_WIDTH;
                height: @POPOVER_ARROW_HEIHT;
            }
        }

        &.dx-position-right,
        &.dx-position-left {
            .dx-popover-arrow {
                width: @POPOVER_ARROW_HEIHT;
                height: @POPOVER_ARROW_WIDTH;
            }
        }
    }
}

.dx-popover-arrow-size(20px);

.dx-popover-arrow {
    position: absolute;
    z-index: 2000;
    overflow: hidden;

    &:after {
        position: absolute;
        display: block;
        overflow: hidden;
        content: " ";
        .rotate(-45deg);
    }
}

.dx-popover-wrapper {
    &.dx-position-top .dx-popover-arrow:after {
        top: 0;
        left: 0;
        .transform-origin(~"top left");
    }

    &.dx-position-bottom .dx-popover-arrow:after {
        right: 0;
        bottom: 0;
        .transform-origin(~"bottom right");
    }

    &.dx-position-left .dx-popover-arrow:after {
        bottom: 0;
        left: 0;
        .transform-origin(~"bottom left");
    }

    &.dx-position-right .dx-popover-arrow:after {
        top: 0;
        right: 0;
        .transform-origin(~"top right");
    }

    .dx-overlay-content {
        overflow: visible;
    }

    .dx-popup-content {
        overflow: hidden;
    }
}

.dx-device-ios { /*NOTE: fix arrow rendering on ios (T178931)*/
    .dx-popover-arrow:after {
        -webkit-transform: rotate(-45deg) translateZ(0);
    }
}
